<!--
 * @Author: lide1202@hotmail.com
 * @Date: 2021-3-13 11:04:24
 * @Last Modified by:   lide1202@hotmail.com
 * @Last Modified time: 2021-3-13 11:04:24
 !-->
<template>
  <el-dialog :title="$t(`btn.${modelType}`)" width="50%" :close-on-click-modal="false" center :visible.sync="showDialog" @close="handleCloseDialog">
    <el-form ref="formDialog" :model="saveForm" :label-width="option.editDialog.labelWidth || '100px'" :disabled="modelType == 'view'">
      <el-row class="form_table">
        <template v-for="item in option.columns">
          <el-col v-if="item.editHide != true" :key="item.field" :span="12">
            <el-form-item :label="item.label" :rules="item.rules" :prop="item.field" :disabled="item.disabled">
              <!-- 输入框 -->
              <el-input v-if="item.inputType == 'input'" v-model.trim="saveForm[item.field]" :placeholder="item.placeholder || $t('placeholder.input')" :clearable="item.clearable !== false" :disabled="item.notEditable && dialogTittle != 'add'" />
              <!-- 下拉框 -->
              <anji-select v-else-if="item.inputType == 'anji-select'" v-model.trim="queryParams[item.field]" :dict-code="item.anjiSelectOption.dictCode" :url="item.anjiSelectOption.url" :option="item.anjiSelectOption.option" :label="item.anjiSelectOption.label" />
              <!-- 日期时间框  -->
              <el-date-picker v-else-if="item.inputType.indexOf('date') >= 0" v-model="queryParams[item.field]" style="width: 100%" :placeholder="item.placeholder || $t('placeholder.select')" :type="item.inputType" :clearable="item.clearable !== false" />
              <el-input v-else placeholder="组件不支持此类型表单请至组件内部自行扩展" disabled />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button v-if="modelType != 'view'" type="primary" plain @click="handleSave">{{ $t('btn.confirm') }}</el-button>
      <el-button type="danger" plain @click="handleCloseDialog">{{ $t('btn.close') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'EditDialog',
  components: {},
  model: {
    prop: 'value',
    event: 'input',
  },
  props: {
    openDialog: {
      type: [Boolean],
      default: () => {
        return false
      },
    },
    queryParams: {}, // 查询参数，对应表格那行数据
    modelType: String, // view edit
    option: {
      require: true,
      type: Object,
      default: () => {
        return {
          // 查询表单条件
          queryFormFields: [],
          // 按钮
          buttons: {
            query: {},
            edit: {},
            delete: {},
            add: {},
          },
          // 表格列
          columns: [],
          // 弹框配置
          editDialog: {},
        }
      },
    },
    value: {
      type: [Object],
      default: () => {},
    },
  },
  data() {
    return {
      showDialog: false, // 编辑详情弹框是否显示
      saveForm: {}, // 提交表单的数据
    }
  },
  computed: {
    // 是否可以批量删除
    disableBatchDelete() {
      return this.checkRecords.length <= 0
    },
  },
  watch: {
    openDialog(newValue, oldValue) {
      this.showDialog = newValue
    },
    queryParams(newValue, oldValue) {
      if (newValue != null) {
        this.queryByPrimarykey(newValue)
      }
    },
  },
  mounted() {},
  methods: {
    handleCloseDialog() {
      this.showDialog = false
    },
    async queryByPrimarykey(queryParams) {
      const { data, code } = await this.option.buttons.queryByPrimarykey.api(queryParams)
      if (code != '200') return
      this.showDialog = true
      this.saveForm = data
    },
    handleSave() {
      this.$refs.formDialog.validate(async(valid, obj) => {
        if (valid) {
          if (this.modelType == 'add') {
            const { code } = await this.option.buttons.add.api(this.saveForm)
            if (code != '200') return
            this.handleCloseDialog()
          } else {
            const { code } = await this.option.buttons.edit.api(this.saveForm)
            if (code != '200') return
            this.handleCloseDialog()
          }
          this.$emit('closeEvent')
        } else {
          return
        }
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
